<template>
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogTableVisible">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户账号" prop="account">
        <el-input v-model="ruleForm.account" />
      </el-form-item>
      <el-form-item label="用户生日" prop="region">
        <el-date-picker
          v-model="ruleForm.birthday"
          value-format="yyyy-MM-dd"
          style="width:100%"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="用户头像" prop="avatar">
        <el-upload
          class="upload-demo"
          style="position:relative"
          :action="httpUrl+get_branch+'/ht-user/user/upload'"
          :headers="headers"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-success="onSuccess"
          multiple
          :limit="1000"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <el-button  class="uploadAutoClass" size="small" type="primary">点击上传</el-button>
           <span class="el-upload-list-jk" :title="fileName_jk">{{ fileName_jk }}</span>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户编号" prop="code">
        <el-input v-model="ruleForm.code" />
      </el-form-item>
      <el-form-item label="部门ID" prop="deptId">
        <el-select v-model="ruleForm.deptId" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.deptName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="电话号码" prop="phone">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="岗位ID" prop="postId">
        <el-select v-model="ruleForm.postId" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.id"
            :label="item.postName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="用户真实姓名" prop="realName">
        <el-input v-model="ruleForm.realName" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio label="0">未知</el-radio>
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio label="0">正常</el-radio>
          <el-radio label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">{{ btnStr }}</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/auth'
import { htuserusersave } from '@/api/home_'
import { validatePhoneTwo } from '@/utils/validate'

export default {
  filters: {

  },
  components: {

  },
  data() {
    var validEmail = (rule, value, callback) => {
        if (value != '') {
          const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          if(!reg.test(value)){
            callback(new Error('邮箱格式不对'));
          }else{
            callback()
          }
        }else{
          callback()
        }
      };
    return {
      fileName_jk:"",
      options2: [],
      options: [],
      httpUrl: process.env.VUE_APP_BASE_API,
      headers: {
        Authorization: 'bearer ' + getToken()
      },
      btnStr: '立即创建',
      title: '新增',
      fileList: [],
      dialogTableVisible: false,
      ruleForm: {
        'account': '',
        'avatar': '',
        'birthday': '',
        'code': '',
        'createTime': '',
        'createUserid': 0,
        'deptId': '',
        'email': '',
        'isAdmin': 0,
        'isDeleted': 0,
        'name': '',
        'password': '',
        'phone': '',
        'postId': '',
        'realName': '',
        'sex': '0',
        'status': '0',
        'updateTime': '',
        'updateUserid': 0
      },
      rules: {
        "email":[
          { required: false, validator: validEmail, trigger: 'change' },
        ],
        "phone":[
          { required: false, validator: validatePhoneTwo, trigger: 'change'},
        ]
      }
    }
  },
  created() {
  },
  methods: {
    onSuccess(v) {
      if (v.code == 200) {
        this.$message.success('上传成功')
        this.fileName_jk = v.data
        this.ruleForm.avatar = v.data
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除${file.name||'头像'}？`)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.sex = Number(this.ruleForm.sex)
          this.ruleForm.status = Number(this.ruleForm.status)
          htuserusersave(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.$emit('refresh')
              this.dialogTableVisible = false
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.fileList = []
      this.ruleForm = {
        'account': '',
        'avatar': '',
        'birthday': '',
        'code': '',
        'createTime': '',
        'createUserid': 0,
        'deptId': '',
        'email': '',
        'isAdmin': 0,
        'isDeleted': 0,
        'name': '',
        'password': '',
        'phone': '',
        'postId': '',
        'realName': '',
        'sex': '0',
        'status': '0',
        'updateTime': '',
        'updateUserid': 0
      }
      // this.$refs[formName].resetFields();
    },
    setVal(v, depList, postList) {
      this.options2 = postList
      this.options = depList
      this.title = v == 'add' ? '新增' : '修改'
      this.btnStr = v == 'add' ? '立即创建' : '修改'

      if (v != 'add') {
        this.ruleForm = JSON.parse(v)
        this.fileName_jk = this.ruleForm.avatar
        this.fileList = [{url:this.ruleForm.avatar}]
        this.ruleForm.sex = this.ruleForm.sex + ''
        this.ruleForm.status = this.ruleForm.status + ''
      } else {
        this.resetForm()
      }
      this.dialogTableVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
>>>.el-upload-list__item-name{
  width: 220px;
}
>>>.el-select{
  width:100%;
}
>>>.el-upload-list{
    display: none;
    position:absolute !important;
    left:100px !important;
    top:-6px !important;
}
>>>.el-upload-list-jk{
  position:absolute !important;
  left:100px !important;
  top:0 !important;
  width: 140px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-form{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    .el-form-item{
        width:50%;
    }
}
</style>
